<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 聊天助手</title>
    <link rel="stylesheet" href="css/chat.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark.min.css">
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="mb-0"><i class="fas fa-robot mr-2"></i>AI 聊天助手</h1>
                </div>
                <div class="col-md-6 text-right">
                    <div class="mode-selector">
                        <span class="mode-label">对话模式：</span>
                        <div class="btn-group">
                            <button type="button" class="btn btn-mode dropdown-toggle" data-toggle="dropdown">
                                <span id="currentMode">流式对话</span>
                                <i class="fas fa-angle-down ml-2"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item active" href="#" data-mode="stream"><i class="fas fa-stream mr-2"></i>流式对话</a>
                                <a class="dropdown-item" href="#" data-mode="chat"><i class="fas fa-comment mr-2"></i>普通对话</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container main-container">
        <div class="chat-container">
            <div class="chat-messages">
                <div class="chat-box" id="chatBox">
                    <div class="system-message">
                        <div class="message-content">
                            <i class="fas fa-info-circle mr-2"></i>欢迎使用AI聊天助手，请输入您的问题。
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="chat-input-container">
                <div class="input-group">
                    <textarea id="messageInput" class="form-control" placeholder="输入您的问题..." rows="1"></textarea>
                    <div class="input-group-append">
                        <button class="btn btn-primary btn-send" id="sendBtn">
                            <i class="fas fa-paper-plane"></i>
                            <span class="d-none d-md-inline ml-2">发送</span>
                        </button>
                        <button class="btn btn-outline-secondary btn-clear ml-2" id="clearBtn" title="清空聊天记录">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="input-hint text-muted mt-1">
                    <small>按 Enter 发送，Shift+Enter 换行</small>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">© 2023 AI 聊天助手</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
    <script src="js/chat.js"></script>
</body>
</html> 